<template>
	<view class="content">
		<view v-if="!commentlist||commentlist.length==0" style="color: #CCCCCC;text-align: center;width: 100%;height: 500upx;line-height: 500upx;font-size: 32upx;"> 暂无评价</view> 
		<scroll-view v-else class="list" scroll-y >
			<block v-for="(item, index) in commentlist" :key="index" >
				<view class="cart-item1">
					<view class="un-touxiang">
						<view class="portrait-box" >
							<image class="portrait" :src=" avator|| '/static/missing-face.png'"   mode="aspectFill"  ></image>
						</view>
						
						<view class="un-touxiang-text">
							<text class="clamp">{{user.NAME}}</text>
						</view>
						
						<view >
							<!-- <text class="iconfont icon-caidan1" @tap="niming(index)" style="font-size: 40upx;"></text> -->
							<min-action-sheet :ref="index"></min-action-sheet>
						</view>
					</view>
					<view class="commenttime">{{item.CREATEDATE}}</view>
					<view class="commenttext">{{item.CONTENT}}</view>
					<scroll-view class="un-image-section" scroll-x>
						<view class="scoll-wrapper">
							<view class="goods-imgs" v-for="(pic,index2) in item.THUMB" :key="index2" >
								<image @click="previewImage(index,index2)"  class="goods-img" style="width: 200upx;height: 200upx;" :src="img+pic"  mode="aspectFill"  ></image>
							</view>
						</view>
					</scroll-view>
				
					<!-- 普通订单评价 -->
					<view class="cart-item"  v-if="item.GOODS != undefined" @click="product(item.GOODS.GOODSID)">
						<view class="">
							<image  class="goods-img" style="width: 150upx;height: 150upx;"
							 :src="img+item.GOODS.THUMB"  mode="aspectFill"  ></image>
						</view>
						
						<view class="item-right">
							<text class="clamp title"  >{{item.GOODS.TITLE}}</text>
							<view class="tem1">
								<view class="tem2">
									<text class="attr">{{item.GOODS.GOODSSPEC}}</text>
									<text class="price" v-if="item.EVAL1>3">已好评，获得积分</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 兑换订单评价 -->
					<view class="cart-item"  v-if="item.GOOD != undefined" @click="exchangeProduct(item.GOOD.GOODID,item.GOOD.SID)">
						<view class="">
							<image  class="goods-img" style="width: 150upx;height: 150upx;"
							 :src="img+item.GOOD.THUMB"  mode="aspectFill"  ></image>
						</view>
						
						<view class="item-right">
							<text class="clamp title"  >{{item.GOOD.NAME}}</text>
							<view class="tem1">
								<view class="tem2">
									<text class="attr1">{{item.GOOD.SHORTINFO}}</text>
									<text class="price" v-if="item.EVAL1>3">已好评，获得积分</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template> 

<script>
	import empty from "@/components/empty";
	import Json from '@/Json';
	import { mapState } from 'vuex'; 
	import minActionSheet from '@/components/min-action-sheet/min-action-sheet';
	export default {
		components: {
			empty,
			minActionSheet
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		data() {
			return {
				commentlist:[],
				picSrc:[],
				img: '',
				user:'',
				avator:'',
			};
		},
		
		onLoad(options){
			this.img = getApp().globalData.imageAddress
			this.loadData();
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap() {
				uni.navigateTo({
					url: '/pages/comment/commentHelp/commentHelp'
				})
		},
		
		methods: {
			navTo(url){
				uni.navigateTo({  
					url
				})  
			}, 
			product(id){
				uni.navigateTo({
					url: '/pages/product/product?id='+id
				})
			},
			exchangeProduct(id,sid){
				uni.navigateTo({
					url: '/pages/product/productExchange?id='+id +'&sid='+sid
				})
			},
			//获取订单列表
			async loadData(){
				//查询订单列表
				this.$http.post("/order/commentlist",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
					TOKEN: uni.getStorageSync('userInfo').TOKEN,
				}).then(e=>{
					console.log(">>>>>>>>>>>>>",e);
					if(e.data.STATE === '0' && e.statusCode === 200){
						this.commentlist.length = 0
						e.data.OBJECT.LIST.sort((a,b)=>{
							return a.CREATEDATE - b.CREATEDATE ? 1 : -1
							})
						e.data.OBJECT.LIST.forEach(item=>{
							this.commentlist.push(item)
						})
						this.user = e.data.OBJECT.USER
						if(this.user.AVATOR){
							this.avator=getApp().globalData.imageAddress+this.user.AVATOR;
						}
					}else{
						uni.showToast({title:e.data.MSG, icon:"none"});
					}
				}).catch(err =>{
					console.log('request fail', err);
				})
				
				
			}, 
			
			
			//预览图片
			previewImage: function(index,e) {
				console.log(">>>",this.commentlist[index].THUMB)
				var current = e
				var list = this.commentlist[index].THUMB.map(item=>{
					return item = this.img+ item
				})
				uni.previewImage({
					current: current,
					urls: list
				})
			},
			
		},
	}
</script>

<style lang="scss">
	page, .content{
		background: $page-color-base;
		height: 100%;
	}
	.commenttime{
		font-size: 30upx;
	}
	.commenttext{
		font-size: 40upx;
	}
	.list{
		height: 100%;
		.cart-item1{
			padding:0upx 40upx;
			background-color: #fff;
			margin-top: 25upx;
			position:relative;
			.un-touxiang{
				display: flex;
				align-items: center;
				.portrait{
					width: 76upx;
					height: 76upx;
					border:5upx solid #fff;
					border-radius: 50%;
					margin-top: 15upx;
				}
				.un-touxiang-text{
					display: block;
					margin: 20upx 400upx 20upx 20upx;
				}
				text{
					color: #999999;
					font-size:25upx;
					line-height: 40upx;
				}
				
			}
			
			.un-p{
				position: absolute;
				z-index: 8;
				width: 60upx;
				height: 37upx;
				background-color: #666666;
				font-size: 26upx;
				color: #fff;
				border-radius: 50upx;
				text-align: center;
				top: 250upx;
				right: 60upx;
			}
			
			.un-image-section{
				
				white-space: nowrap;
				.scoll-wrapper{
					display:flex;
					align-items: flex-start;
					.goods-img{
						margin: 0upx 10upx;
					}
				}
				
				.image-wrapper{
					background-color: #fff;
					width: 190upx;
					height: 190upx;
					flex-shrink: 0;
					margin: 0upx 50upx 0upx 0upx;
					image{
						border-radius:8upx;
					}
				}
			}
			
			.un-comment{
				height: auto;
				padding: 5upx 0upx;
				overflow:hidden;
				text-overflow:ellipsis;
				text{
					font-size: 24upx;
					color: #999999;
					line-height: normal;
					
				}
			}
			
			.cart-item{
				background: $page-color-base;
				display:flex;
				position:relative;
				padding:20upx 10upx;
				border: 15upx solid #FFFFFF;
				margin: 0upx -15upx;
				.goods-img{
					margin-top: 30upx;
				}
				.item-right{
					display:flex;
					flex-direction: column;
					flex: 1;
					position:relative;
					padding-left: 30upx;
					.title{
						margin-top: 10px;
						font-size:$font-base +2upx;
						color: $font-color-dark;
						height: 40upx;
						line-height: 40upx;
						overflow: hidden;
						word-wrap: break-word;
						word-break: normal;
						width: 470upx;
					}
					.tem1{
						display:flex;
						overflow: hidden;
						.tem2{
							width: 80%;
							display:flex;
							flex-direction: column;
							color: $font-color-light;
							font-size: $font-sm +2upx;
							overflow: hidden;
							word-wrap: break-word;
							word-break: normal;
							width: 470upx;
							.attr1{
								margin-top: 15upx;
								overflow: hidden;
								word-wrap: break-word;
								word-break: normal;
								width: 470upx;
							}
							.attr{
								margin-top: 15upx;
							
							}
							.price{
								margin-top: 15upx;
							}
						}
					}
				}
			}
			
		}
	}

	

</style>
